<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Chain Responsive Bootstrap3 Admin</title>

        <link href="css/style.default.css" rel="stylesheet">
        <link href="css/prettyPhoto.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        
        <header>
            <div class="headerwrapper">
                <div class="header-left">
                    <a href="index.html" class="logo">
                        <img src="images/logo.png" alt="" /> 
                    </a>
                    <div class="pull-right">
                        <a href="" class="menu-collapse">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div>
                </div><!-- header-left -->
                
                <div class="header-right">
                    
                    <div class="pull-right">
                        
                        <form class="form form-search" action="search-results.html">
                            <input type="search" class="form-control" placeholder="Search" />
                        </form>
                        
                        <div class="btn-group btn-group-list btn-group-notification">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-bell-o"></i>
                              <span class="badge">5</span>
                            </button>
                            <div class="dropdown-menu pull-right">
                                <a href="" class="link-right"><i class="fa fa-search"></i></a>
                                <h5>Notification</h5>
                                <ul class="media-list dropdown-list">
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> likes a photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> 15 minutes ago</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user2.png" alt="">
                                        <div class="media-body">
                                          <strong>Weno Carasbong</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 04, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user3.png" alt="">
                                        <div class="media-body">
                                          <strong>Venro Leonga</strong> likes a photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user4.png" alt="">
                                        <div class="media-body">
                                          <strong>Nanterey Reslaba</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 02, 2014</small>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown-footer text-center">
                                    <a href="" class="link">See All Notifications</a>
                                </div>
                            </div><!-- dropdown-menu -->
                        </div><!-- btn-group -->
                        
                        <div class="btn-group btn-group-list btn-group-messages">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                <span class="badge">2</span>
                            </button>
                            <div class="dropdown-menu pull-right">
                                <a href="" class="link-right"><i class="fa fa-plus"></i></a>
                                <h5>New Messages</h5>
                                <ul class="media-list dropdown-list">
                                    <li class="media">
                                        <span class="badge badge-success">New</span>
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong>
                                          <p>Hi! How are you?...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> 15 minutes ago</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <span class="badge badge-success">New</span>
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user2.png" alt="">
                                        <div class="media-body">
                                          <strong>Weno Carasbong</strong>
                                          <p>Lorem ipsum dolor sit amet...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 04, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user3.png" alt="">
                                        <div class="media-body">
                                          <strong>Venro Leonga</strong>
                                          <p>Do you have the time to listen to me...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user4.png" alt="">
                                        <div class="media-body">
                                          <strong>Nanterey Reslaba</strong>
                                          <p>It might seem crazy what I'm about to say...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong>
                                          <p>Hey I just met you and this is crazy...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 02, 2014</small>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown-footer text-center">
                                    <a href="" class="link">See All Messages</a>
                                </div>
                            </div><!-- dropdown-menu -->
                        </div><!-- btn-group -->
                        
                        <div class="btn-group btn-group-option">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                              <li><a href="#"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-star"></i> Activity Log</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li>
                              <li class="divider"></li>
                              <li><a href="#"><i class="glyphicon glyphicon-log-out"></i>Sign Out</a></li>
                            </ul>
                        </div><!-- btn-group -->
                        
                    </div><!-- pull-right -->
                    
                </div><!-- header-right -->
                
            </div><!-- headerwrapper -->
        </header>
        
        <section>
            <div class="mainwrapper">
                <div class="leftpanel">
                    <div class="media profile-left">
                        <a class="pull-left profile-thumb" href="profile.html">
                            <img class="img-circle" src="images/photos/profile.png" alt="">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Elen Adarna</h4>
                            <small class="text-muted">Beach Lover</small>
                        </div>
                    </div><!-- media -->
                    
                    <h5 class="leftpanel-title">Navigation</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
                        <li><a href="messages.html"><span class="pull-right badge">5</span><i class="fa fa-envelope-o"></i> <span>Messages</span></a></li>
                        <li class="parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a>
                            <ul class="children">
                                <li><a href="alerts.html">Alerts &amp; Notifications</a></li>
                                <li><a href="buttons.html">Buttons</a></li>
                                <li><a href="extras.html">Extras</a></li>
                                <li><a href="graphs.html">Graphs &amp; Charts</a></li>
                                <li><a href="icons.html">Icons</a></li>
                                <li><a href="modals.html">Modals</a></li>
                                <li><a href="widgets.html">Panels &amp; Widgets</a></li>
                                <li><a href="sliders.html">Sliders</a></li>                                
                                <li><a href="tabs-accordions.html">Tabs &amp; Accordions</a></li>
                                <li><a href="typography.html">Typography</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-edit"></i> <span>Forms</span></a>
                            <ul class="children">
                                <li><a href="code-editor.html">Code Editor</a></li>
                                <li><a href="general-forms.html">General Forms</a></li>
                                <li><a href="form-layouts.html">Layouts</a></li>
                                <li><a href="wysiwyg.html">Text Editor</a></li>
                                <li><a href="form-validation.html">Validation</a></li>
                                <li><a href="form-wizards.html">Wizards</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-bars"></i> <span>Tables</span></a>
                            <ul class="children">
                                <li><a href="basic-tables.html">Basic Tables</a></li>
                                <li><a href="data-tables.html">Data Tables</a></li>
                            </ul>
                        </li>
                        <li><a href="maps.html"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li>
                        <li class="parent active"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a>
                            <ul class="children">
                                <li><a href="notfound.html">404 Page</a></li>
                                <li><a href="blank.html">Blank Page</a></li>
                                <li><a href="calendar.html">Calendar</a></li>
                                <li><a href="invoice.html">Invoice</a></li>
                                <li><a href="locked.html">Locked Screen</a></li>
                                <li class="active"><a href="media-manager.html">Media Manager</a></li>
                                <li><a href="people-directory.html">People Directory</a></li>
                                <li><a href="profile.html">Profile</a></li>                                
                                <li><a href="search-results.html">Search Results</a></li>
                                <li><a href="signin.html">Sign In</a></li>
                                <li><a href="signup.html">Sign Up</a></li>
                            </ul>
                        </li>
                        
                    </ul>
                    
                </div><!-- leftpanel -->
                
                <div class="mainpanel">
                    <div class="pageheader">
                        <div class="media">
                            <div class="pageicon pull-left">
                                <i class="fa fa-folder"></i>
                            </div>
                            <div class="media-body">
                                <ul class="breadcrumb">
                                    <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                                    <li><a href="">Pages</a></li>
                                    <li>Media Manager</li>
                                </ul>
                                <h4>Media Manager</h4>
                            </div>
                        </div><!-- media -->
                    </div><!-- pageheader -->
                    
                    <div class="contentpanel contentpanel-mediamanager">
                        
                        <div class="media-options">
                            <div class="pull-left">
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <button id="selectAll" class="btn btn-default btn-sm" type="button">Select All</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-sm disabled" type="button"><i class="fa fa-envelope mr5"></i> Email</button>
                                        <button class="btn btn-default btn-sm disabled" type="button"><i class="fa fa-download mr5"></i> Download</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-sm disabled" type="button"><i class="fa fa-pencil mr5"></i> Edit</button>
                                        <button class="btn btn-default btn-sm disabled" type="button"><i class="fa fa-trash-o mr5"></i> Delete</button>
                                    </div>
                                </div><!-- btn-toolbar -->
                            </div>
                            <div class="pull-right">
                                Show: 
                                <div class="btn-group media-option-group" data-toggle="buttons">
                                    <label class="btn btn-default btn-sm active">
                                      <input type="radio" name="options" id="opAll" checked> All
                                    </label>
                                    <label class="btn btn-default btn-sm">
                                      <input type="radio" name="options" id="opDoc"> Documents
                                    </label>
                                    <label class="btn btn-default btn-sm">
                                      <input type="radio" name="options" id="opImg"> Images
                                    </label>
                                    <label class="btn btn-default btn-sm">
                                      <input type="radio" name="options" id="opVid"> Videos
                                    </label>
                                    <label class="btn btn-default btn-sm">
                                      <input type="radio" name="options" id="opAud"> Audios
                                    </label>
                                </div><!-- btn-group -->
                            </div>
                        </div><!-- media-options -->
                        
                        <hr>
      
                        <div class="row">
                          <div class="col-sm-9">
                            <div class="row media-manager">
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 document">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check1" value="1" />
                                    <label for="check1"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media-doc.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">MyDocuments.doc</a></h5>
                                  <small class="text-muted">Added: Jan 03, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 image">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check2" value="1" />
                                    <label for="check2"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <a href="images/photos/media1.jpg" data-rel="prettyPhoto">
                                      <img src="images/photos/media1.jpg" class="img-responsive" alt="" />
                                    </a>
                                  </div>
                                  <h5 class="fm-title"><a href="">Vegetarian.png</a></h5>
                                  <small class="text-muted">Added: Jan 02, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 video">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check3" value="1" />
                                    <label for="check3"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media5.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">DogAnimation.mp4</a></h5>
                                  <small class="text-muted">Added: Jan 02, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 audio">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check7" value="1" />
                                    <label for="check7"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media-audio.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">WreckingBall.mp3</a></h5>
                                  <small class="text-muted">Added: Jan 01, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 image">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check4" value="1" />
                                    <label for="check4"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <a href="images/photos/media3.png" data-rel="prettyPhoto">
                                      <img src="images/photos/media3.png" class="img-responsive" alt="" />
                                    </a>
                                  </div>
                                  <h5 class="fm-title"><a href="">MyFirstArt.png</a></h5>
                                  <small class="text-muted">Added: Jan 01, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 document">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check5" value="1" />
                                    <label for="check5"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media-doc.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">MyResume.docx</a></h5>
                                  <small class="text-muted">Added: Jan 01, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 video">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check6" value="1" />
                                    <label for="check6"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media4.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">MyFirstMovie.mp4</a></h5>
                                  <small class="text-muted">Added: Jan 01, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                                          
                              <div class="col-xs-6 col-sm-4 col-md-3 image">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check13" value="1" />
                                    <label for="check13"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <a href="images/photos/media2.png" data-rel="prettyPhoto">
                                      <img src="images/photos/media2.png" class="img-responsive" alt="" />
                                    </a>
                                  </div>
                                  <h5 class="fm-title"><a href="">MeAndFriends.png</a></h5>
                                  <small class="text-muted">Added: Jan 01, 2014</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 audio">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check8" value="1" />
                                    <label for="check8"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media-audio.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">IWillSurvive.mp3</a></h5>
                                  <small class="text-muted">Added: Dec 31, 2013</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 document">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check9" value="1" />
                                    <label for="check9"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media-doc.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">MyDocuments.doc</a></h5>
                                  <small class="text-muted">Added: Dec 31, 2013</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 image">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check10" value="1" />
                                    <label for="check10"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <a href="images/photos/media6.png" data-rel="prettyPhoto">
                                      <img src="images/photos/media6.png" class="img-responsive" alt="" />
                                    </a>
                                  </div>
                                  <h5 class="fm-title"><a href="">GreatCity.png</a></h5>
                                  <small class="text-muted">Added: Dec 30, 2013</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                              <div class="col-xs-6 col-sm-4 col-md-3 video">
                                <div class="thmb">
                                  <div class="ckbox ckbox-default">
                                    <input type="checkbox" id="check11" value="1" />
                                    <label for="check11"></label>
                                  </div>
                                  <div class="btn-group fm-group">
                                      <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu fm-menu pull-right" role="menu">
                                        <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
                                        <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                        <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                        <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
                                        <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
                                      </ul>
                                  </div><!-- btn-group -->
                                  <div class="thmb-prev">
                                    <img src="images/photos/media7.png" class="img-responsive" alt="" />
                                  </div>
                                  <h5 class="fm-title"><a href="">InTheSea.mp4</a></h5>
                                  <small class="text-muted">Added: Dec 30, 2013</small>
                                </div><!-- thmb -->
                              </div><!-- col-xs-6 -->
                              
                            </div><!-- row -->
                            
                            <br />
                            <ul class="pagination pagination-split mt5">
                                <li class="disabled"><a href="#"><i class="fa fa-angle-left"></i></a></li>
                                <li><a href="#">1</a></li>
                                <li class="active"><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                            </ul>
                            
                            
                          </div><!-- col-sm-9 -->
                          <div class="col-sm-3">
                            <div class="media-manager-sidebar">
                              
                              <button class="btn btn-primary btn-block">Upload Files</button>
                              
                              <div class="mb30"></div>
                              
                              <h5 class="lg-title">Folders <a href="" class="pull-right">+ Add New Folder</a></h5>
                              <ul class="folder-list">
                                <li><a href=""><i class="fa fa-folder-o"></i> My Pictures</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> Facebook Photos</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> My Collection</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> Illustrations</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> TV Series</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> Downloaded Movies</a></li>
                                <li><a href=""><i class="fa fa-folder-o"></i> E-book</a></li>
                              </ul>
                              
                              <div class="mb30"></div>
                              
                              <h5 class="lg-title">Tags</h5>
                              <ul class="tag-list">
                                <li><a href="">Animation</a></li>
                                <li><a href="">Design</a></li>
                                <li><a href="">Trailer</a></li>
                                <li><a href="">Short Film</a></li>
                                <li><a href="">Dubstep</a></li>
                                <li><a href="">Soundtrack</a></li>
                                <li><a href="">Photography</a></li>
                                <li><a href="">Macro</a></li>
                                <li><a href="">Tuturials</a></li>
                                <li><a href="">Documentation</a></li>
                              </ul>
                              
                            </div>
                          </div><!-- col-sm-3 -->
                        </div>
                      </div>
                    
                    </div><!-- contentpanel -->
                    
                
            </div><!-- mainwrapper -->
        </section>


        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/modernizr.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/retina.min.js"></script>
        <script src="js/jquery.cookies.js"></script>
        
        <script src="js/jquery.prettyPhoto.js"></script>

        <script src="js/custom.js"></script>
        <script>
            jQuery(document).ready(function(){
    
                jQuery('.thmb').hover(function() {
                    var t = jQuery(this);
                    t.find('.ckbox').show();
                    t.find('.fm-group').show();
                }, function() {
      
                    var t = jQuery(this);
                    if(!t.closest('.thmb').hasClass('checked')) {
                        t.find('.ckbox').hide();
                        t.find('.fm-group').hide();
                    }
                });
    
                jQuery('.ckbox').each(function(){
                    var t = jQuery(this);
                    var parent = t.parent();
                    if(t.find('input').is(':checked')) {
                        t.show();
                        parent.find('.fm-group').show();
                        parent.addClass('checked');
                    }
                });
    
    
                jQuery('.ckbox').click(function(){
                    var t = jQuery(this);
                    if(!t.find('input').is(':checked')) {
                        t.closest('.thmb').removeClass('checked');
                        enable_itemopt(false);
                    } else {
                        t.closest('.thmb').addClass('checked');
                        enable_itemopt(true);
                    }
                });
    
                jQuery('#selectAll').click(function() {
                    if(jQuery(this).hasClass('btn-default')) {
                        jQuery('.thmb').each(function() {
                            jQuery(this).find('input').attr('checked',true);
                            jQuery(this).addClass('checked');
                            jQuery(this).find('.ckbox, .fm-group').show();
                        });
                        enable_itemopt(true);
                        jQuery(this).removeClass('btn-default').addClass('btn-primary');
                        jQuery(this).text('Select None');
                    } else {
                        jQuery('.thmb').each(function(){
                            jQuery(this).find('input').attr('checked',false);
                            jQuery(this).removeClass('checked');
                            jQuery(this).find('.ckbox, .fm-group').hide();
                        });
                        enable_itemopt(false);
                        jQuery(this).removeClass('btn-primary').addClass('btn-default');
                        jQuery(this).text('Select All');
                    }
                });
    
                function enable_itemopt(enable) {
                    if(enable) {
                        jQuery('.media-options .btn.disabled').removeClass('disabled').addClass('enabled');
                    } else {
        
                        // check all thumbs if no remaining checks
                        // before we can disabled the options
                        var ch = false;
                        jQuery('.thmb').each(function(){
                            if(jQuery(this).hasClass('checked'))
                                ch = true;
                        });
        
                        if(!ch)
                            jQuery('.media-options .btn.enabled').removeClass('enabled').addClass('disabled');
                    }
                }
    
                jQuery("a[data-rel^='prettyPhoto']").prettyPhoto();
    
            });
        </script>
    </body>
</html>
